<script>
import { mapState } from 'vuex'
import AOS from "aos"
import { correctPullDown } from '@/utils/global'
import ChangePage from '@/mixins/ChangePage.vue'
// 初始化动画
AOS.init();

export default {
  name: 'StudentNetwork',
  // 混入方法，公共方法previousPage，上滑至上一页
  mixins: [ ChangePage ],
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    // 获取性别及年度账单数据
    ...mapState({
      gender: state => state.info.gender,
      annualData: state => state.annualData
    })
  },
  mounted () {
    // 打印整个 Vuex state
    console.log('Vuex State:', this.$store.state);

    // 打印 specific state 数据
    console.log('Annual Data:', this.$store.state.annualData);
    // 每个页面都要有
    correctPullDown()
  },
  methods: {
    changePage() {
      this.$router.push({
        path: '/person/student/intro'
      })
    }
  }
}
</script>

<template>
  <div v-swipeup="changePage" v-swipedown="previousPage">
    <!--  假设gender 1 为男 2 为女  -->
    <div :class="gender === '1' ? 'network-boy' : 'network-girl'" :style="cssVar" @click="changePage">
      <!--     因为设计稿中男女的文字布局有所不一样，所以需要判断性别选择样式 -->
      <div class="student-con">
        <!--       这里是动画的效果，参考aos官网https://michalsnik.github.io/aos/ -->
        <div :data-aos="'fade-right'"
             data-aos-easing="ease-in-back"
             data-aos-delay="300"
             data-aos-offset="0"
             data-aos-duration="800"
             id="myText">
          <div v-if="annualData.accumulateWebUseHour && annualData.accumulateWebFlow_GB" class="mt-10">
            <div class="mt-10">
              <br/>
              <br/>
              <p>2024年</p>
              <p>嗨！这位冲浪小能手</p>
              <p>你连接校园网 <span class="data">{{ annualData.accumulateWebUseHour }}</span> 小时</p>
              <p>累计使用了 <span class="data">{{ annualData.accumulateWebFlow_GB }}</span> G流量</p>
<!--              <p>最晚使用校园网的时间为 <span class="data">{{ annualData.lastestSurfing }}</span></p>-->
              <p>要注意休息哦</p>
              <p>校园网不仅是知识的桥梁</p>
              <p>更是青春的见证者</p>
            </div>
            <br/>
            <div class="mt-10">
              <p>这一年</p>
              <p>你不仅是在上网</p>
              <p>更是在编织你的校园生活</p>
              <p>同时希望你能爱护眼睛</p>
              <p>网络世界里不要贪杯哦</p>
            </div>
          </div>
          <!--  兜底文案  -->
          <div v-else class="mt-10">
            <div class="mt-10">
              <br/>
              <br/>
              <br/>
              <br/>
              <p>这一年</p>
              <p>校园网陪伴着你一同努力成长</p>
              <p>每一次的连接</p>
              <p>都是知识与情感的传递</p>
              <p>每一次的数据传输</p>
              <p>都助力着你的学业进步</p>
            </div>
            <br/>
            <div class="mt-10">
              <p>期待新的一年</p>
              <p>校园网能继续为你服务</p>
              <p>伴你在求知的道路上扬帆远航</p>
              <p>开启更多精彩篇章</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.network-girl{
  background: url("../../assets/images/network/student_girl.jpg") no-repeat;
  background-size: 100% 100%;
}
.network-boy{
  background: url("../../assets/images/network/student_boy.jpg") no-repeat;
  background-size: 100% 100%;
}
.student-con{
  padding: 60px 10px;
}

p{
  color: #1B3B6A;
}
</style>
